<template>
  <div class="show-issue">
    <a-spin :spinning="loading">
      <div class="problem-list" v-for="(item, index) in tableData" :key="index">
        <div class="problem-item">
          <div>问题{{ index + 1 }}:</div>
          <div class="problem-info">
            <div class="title">问题类型: {{ item.problemType }}</div>
            <div>系统{{ item.problemType }}: {{ item.systemData }}</div>
            <div>代理{{ item.problemType }}: {{ item.agentData }}</div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import { getProblemListApi } from "@/api/financialManagement/payableManagement/index";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Base.GeneraDataType;
  }>(),
  {}
);
const { visible, passData } = toRefs(props);
const { tableData, loading } = InitHook();
const init = () => {
  loading.value = true;
  return getProblemListApi(passData.value.id)
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data || [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
</script>
<style lang="stylus" scoped>
.show-issue{
    .problem-list{
        font-weight: 600;
        .problem-item{
            >div{
                margin-bottom: 12px;
            }
            .problem-info{
                display: flex;
                justify-content: space-between;
            }
        }

    }
}
</style>
